<template>
  <div id="main_page">
    <div class="first_main">
      <div class="top_header_text">
        <span class="top_header_span">购车事项通知书</span>
      </div>
      <div class="center_mian_text">
        <div class="main_data_box">
          <div class="center_header_text">客户信息</div>
          <div class="center_input_data">
            <div
              class="input_data_box"
              v-for="(item, index) in pdfForm.clientInfo"
              :key="index"
            >
              <span class="data_left">{{ item.left }}</span>
              <span class="data_right">{{ item.right }}</span>
            </div>
          </div>
          <div class="center_header_text">车型确认</div>
          <div class="center_input_data">
            <div
              class="input_data_box"
              v-for="(item, index) in pdfForm.carTypeCheck"
              :key="index"
            >
              <span class="data_left new_data_box_left">{{ item.left }}</span>
              <span class="data_right new_data_box_right">{{ item.right }}</span>
            </div>
          </div>
          <div class="center_header_text">
            <p>以上车价为全包落地价，包含为车辆办理上牌手续、保险及车辆抵押等所需之各种税费，购买方不需再承担任何加急费、手续费、运费、出库费等其他费用。</p>
          </div>
          <div class="center_header_text">
            <p>质量要求、技术标准</p>
          </div>
          <div class="classify_text">
            <p>1）约定的车辆其质量必须符合国家标准，并符合生产厂家出厂检验标准，符合安全驾驶和说明书载明的基本使用要求，符合当地人民政府关于尾气排放的标准。</p>
            <p>2）该车辆必须是经国家有关部门公布、备案的车辆产品目录上的产品或合法进口的产品，并能通过公安交通管理部门的检测，可以上牌行驶的汽车。</p>
            <p>3）保证约定车辆为新车，非水泡车、运损车等，外观没有任何损坏，不得出现掉漆、磨损等现象。</p>
            <p>4）若对车辆质量的认定有争议的，以经国家授权的车辆检验机构出具的书面鉴定意见为处理争议的依据。</p>
            <p>5）约定的车辆在交给购买方使用前已作必要的检验和清洁。</p>
          </div>
          <div class="center_header_text">
            <p>约定车辆符合汽车三包政策 （具体内容参照《汽车三包政策》）</p>
          </div>
          <div class="center_header_text">
            付款方式
          </div>
          <div>
            <p>1）全款购车：</p>
            <p>订金及余款均支付到指定的银行账户（4S店或二级经销商等），在卖方通知提车时结清余款方可提车。</p>
          </div>
          <div class="center_input_data" style="margin-top:10px;">
            <div
              class="input_data_box"
              v-for="(item, index) in pdfForm.fullPayMethods"
              :key="index"
            >
              <span class="data_left">{{ item.left }}</span>
              <span class="data_right">{{ item.right }}</span>
            </div>
          </div>
          <div style="margin-top:10px;">
            <p>2）分期购车：</p>
            <p>在按揭通过后，购买方需向 <span class="border_bottom">{{pdfForm.carBusiness || '---'}}</span> 支付车辆首付款；余款支付的时间，双方另行协议。</p>
            <p>购买方应按约定按时、足额支付至如下账户：</p>
          </div>
          <div class="center_input_data" style="margin-top: 10px;">
            <div
              class="input_data_box"
              v-for="(item, index) in pdfForm.mortgagePayMethods"
              :key="index"
            >
              <span class="data_left">{{ item.left }}</span>
              <span class="data_right">{{ item.right }}</span>
            </div>
          </div>
          <div style="margin-top:38px;">
            <p>卖方将最大努力保证车辆的及时交付，如确实因为生产厂商资源不足问题、运输问题外界不可抗因素所造成延误车辆交付，卖方会及时向购买方沟通协商，及时变更车辆交付日期。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="second_main" style="margin-top:200vw;">
      <div><!--   -->
        <p>车辆交接时应当场验收，购买方应对所购车辆外观和基本使用功能等进行认真检查、确认。如对外观有异议，应当场提出。</p>
        <br/>
        <p>购买方验收车辆无误并结清车辆余款后，卖方向购买方交付汽车及随车文件，双方签署车辆交接书，即为该车辆正式交付。</p>
        <br/>
        <p>自车辆正式交付起，该车辆的风险责任由卖方转移至购买方。</p>
        <p style="display:inline-block;">
          <span>提车方式：</span>
          <span style="padding-right:3px;">到店自提</span>
          <img v-if="pdfForm.getCarWay == '01' || pdfForm.getCarWay == '到店自提'" src="./images/enterCheck.png" alt="" style="width:10px;height:10px;">
          <img v-if="pdfForm.getCarWay == '02' || pdfForm.getCarWay == '平台送车上门'" src="./images/isCheck.png" alt="" style="width:10px;height:10px;">
          <span style="padding-right:3px;">平台送车上门</span>
          <img v-if="pdfForm.getCarWay == '02' || pdfForm.getCarWay == '平台送车上门'" src="./images/enterCheck.png" alt="" style="width:10px;height:10px;">
          <img v-if="pdfForm.getCarWay == '01' || pdfForm.getCarWay == '到店自提'" src="./images/isCheck.png" alt="" style="width:10px;height:10px;">
        </p>
      </div>
      <br/>
      <div style="color:blue;">
        <p>选择平台送车上门，验车流程如下：</p>
        <p>平台安排专业验车员，负责将约定车辆全程板车运送。</p>
        <p>（验车员均通过实名认证，购买方会收到验车员身份信息及板车车牌号。）</p>
      </div>
      <div class="downLoad_buyCar_book">
        <img src="./images/downLoadBuyCarBook.jpg" alt="">
      </div>
      <div class="center_header_text">
        <p>车辆交付后卖方需提供：</p>
      </div>
      <div>
        <p>车辆销售发票；</p>
        <p>（国产车）车辆合格证或（进口车）海关进口证明及商品检验单；</p>
        <p>质量服务卡或保修手册；</p>
        <p>车辆使用说明书或用户使用手册；</p>
        <p>随车工具及备件清单。</p>
      </div>
      <div class="center_header_text">
        <p>上牌手续由4S店安排或当地上牌员直接跟进对接。</p>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import $ from 'jquery'
import upload from "@/common/upload.js";

export default {
  data() {
    return {
      pdfForm: {/*
        // 客户信息
        clientInfo: [
          {
            left: '姓名：',
            right: '跑完步'
          },
          {
            left: '身份证号：',
            right: '441234514424353425'
          },
          {
            left: '联系方式：',
            right: '12345678909'
          },
          {
            left: '上牌地区：',
            right: '广东省广州市白云区'
          }
        ],
        // 车型确认
        carTypeCheck: [
          {
            left: '品牌名称：',
            right: '阿斯顿·马丁'
          },
          {
            left: '车型版本：',
            right: '非常牛皮非常牛皮非常牛皮非常牛皮非常牛屁'
          },
          {
            left: '指导价：',
            right: '123万'
          },
          {
            left: '颜色：',
            right: '卡其色'
          },
          {
            left: '数量：',
            right: '100'
          },
          {
            left: '合计金额：',
            right: '1000000'
          },
          {
            left: '大写：',
            right: '一百万'
          }
        ],
        // 商家名称
        carBusiness:'广州美好科技有限公司',
        // 付款方式 => 全款
        fullPayMethods: [
          {
            left: '户名：',
            right: '跑完步'
          },
          {
            left: '账户：',
            right: '441234514424353425'
          },
          {
            left: '开户行：',
            right: '中国农业银行'
          }
        ],
        // 付款方式 => 按揭
        mortgagePayMethods: [
          {
            left: '户名：',
            right: '跑完步'
          },
          {
            left: '账户：',
            right: '441234514424353425'
          },
          {
            left: '开户行：',
            right: '中国农业银行'
          }
        ],
        // 提车方式
        getCarWay:'平台送车上门'
      */}
    }
  },
  methods: {
    // 下载购车事项通知书按钮
    onDownloadBook() {
      // console.log('[ 下载购车事项通知书 ]')
      this.$nextTick(()=>{
        html2canvas(document.getElementById('main_page'), {
        backgroundColor: 'white', // 画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, // 支持图片跨域
        scale: 1 // 设置放大的倍数
      }).then((canvas) => {
        // 截图用img元素承装，显示在页面的上
        let img = new Image()
        // 如果你需要下载截图，可以使用a标签进行下载
        let a = document.createElement('a')
        a.href = canvas.toDataURL('image/png')
        console.log('%c [ a.href ]-275', 'font-size:13px; background:pink; color:#bf2c9f;', a.href)
        a.download = '购车事项通知书'
        // a.click()
        //将base64转换为文件
        let arr = a.href.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        let flie =  new File([u8arr], 'png', {type:mime});
        let formData = new FormData();
        formData.append("file", flie);
        upload(
          (list) => {
            // this.imageUrl = list[0].url
            let imageUrl = list[0].url
            this.$nextTick(()=>{
              // h5与uniapp的交互 => 分享购车事项通知书到微信
              if (window.UniAppJSBridge) {
                uni.postMessage({
                  data:{
                    type:11,
                    title:'购车事项通知书',
                    // _imageUrl:this.imageUrl
                    _imageUrl:imageUrl
                  }
                })
              }
            })
          },
          [formData]
        );
      })
      })
      setTimeout(() => {
        // if (this.downloadPdf) {
        this.$router.push({
          path:'auditDetailFindCar',
          query:{
            id: this.$route.query.id,
            status: this.$route.query.status
          }
        })
        // }
      }, 5000)
    }
  },
  created() {
    this.pdfForm = this.$route.query.pdfForm
    this.$nextTick(() => {
      // document.querySelectorAll('.new_data_box_left')[1].style.width = '60vw'
      document.querySelectorAll('.new_data_box_right')[1].style.width = '60vw'
      this.onDownloadBook()
    })
  }
}
</script>

<style lang="less" scoped>
#main_page {
  // width: 834px;
  // height: 2246px;
  width: 100vw;
  // height: 268vh;
  height: 300vh;
    background-color: #fff;
  padding: 20px 20px 20px 20px;
  .first_main {
    // width: 794px;
    // height: 1123px;
    width: 90vw;
    height: 90vh;
    // border: 1px solid black;
    background-color: #fff;
    .top_header_text {
      width: 100%;
      // height: 69px;
      height: 13vw;
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid black;
      // border-bottom: 1px solid black;
      .top_header_span {
        font-size: 150%;
        font-weight: 500;
      }
    }
    .center_mian_text {
      .main_data_box {
        .center_header_text {
          font-size: 120%;
          font-weight: 800;
          margin: 20px 0 5px 0;
        }
        .center_input_data{
          .input_data_box{
            .data_left{
              // width: 70px;
              width: 25vw;
              text-align: right;
              display: inline-block;
            }
            .data_right{
              // width: 70px;
              display: inline-block;
              border-bottom: 1px solid black;
            }
          }
        }
        .classify_text > p{
          margin-top: 10px;
        }
      }
    }
  }
  .second_main {
    // width: 794px;
    // height: 1123px;
    width: 90vw;
    height: 90vh;
    // border: 1px solid black;
    background-color: #fff;
    .center_header_text {
      font-size: 120%;
      font-weight: 800;
      margin: 20px 0 5px 0;
    }
    .top_header_text {
      width: 100%;
      height: 69px;
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid black;
      border-bottom: 1px solid black;
      .top_header_span {
        font-size: 150%;
        font-weight: 500;
      }
    }
    .center_mian_text {
      .main_data_box {
        .center_header_text {
          font-size: 120%;
          font-weight: 800;
          margin: 20px 0 5px 0;
        }
        .center_input_data{
          .input_data_box{
            .data_left{
              width: 70px;
              text-align: right;
              display: inline-block;
            }
            .data_right{
              // width: 70px;
              // display: inline-block;
              // border-bottom: 1px solid black;
              text-decoration:underline
            }
          }
        }
        .classify_text > p{
          margin-top: 10px;
        }
      }
    }
    .downLoad_buyCar_book{
      display: flex;
      justify-content: center;
      // width: 794px;
      width: 90vw;
      margin-top: 20px;
      img{
        width: 100%;
        height: 100%;
        margin-right: 20px;
      }
    }
  }
  .border_bottom{
     // width: 70px;
     display: inline-block;
     border-bottom: 1px solid black;
  }
}
</style>
